<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <!-- 可以让部分国产浏览器默认采用高速模式渲染页面 -->
    <meta name="renderer" content="webkit">
    <!-- 为了让IE浏览器运行最新的渲染模式下 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords"
        content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
    <link rel="shortcut icon" href="./../favicon.ico">
    <!--    apple-touch-icon:是苹果私有属性
    作用:指定将网页保存到主屏幕上的时候的图标 -->
    <link rel="apple-touch-icon" href="./../apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./../apple-touch-icon114.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./../apple-touch-icon152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./../apple-touch-icon180.png">
    <script>
        let scale = 1.0 / window.devicePixelRatio;
        let text =
            `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`
        document.write(text);
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <link rel="stylesheet" href="./../css/reset.css">
    <link rel="stylesheet" href="./../css/swiper.css">
    <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
    <!-- 
    1.双飞翼布局
    1.1搞一个容器,在容器中方三个子元素
    1.2在中间的元素中再放一个元素
    1.3设置两边的尺寸,设置中间的宽度等于100%
    1.4设置中间元素里面的盒子的margin为两边的宽度
    1.5让三个盒子往统一方向浮动
    
 -->
    <!-- 头部 Start -->
    <div class="header">
        <div class="header-in">
            <img src="images/player-it666-back.png" class="go-back">
            <div>
                <p class="header-title">江南</p>
                <p class="header-singer">林俊杰</p>
            </div>
            <img src="images/player-it666-share.png" alt="">
        </div>
    </div>
    <!-- 头部 End -->
    <!-- 内容 Start -->
    <div class="main">
        <div class="bg"></div>
        <div class="main-in">
            <div class="main-default">
                <div class="default-top">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="disc-pic">
                                    <img src="images/test.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="default-bottom">
                    <li><img src="images/player-it666-favorite.png" alt=""></li>
                    <li><img src="images/player-it666-download.png" alt=""></li>
                    <li><img src="images/player-it666-effect.png" alt=""></li>
                    <li><img src="images/player-it666-comment.png" alt=""></li>
                    <li><img src="images/player-it666-more.png" alt=""></li>
                </ul>
            </div> -->
            <div class="main-lyric">
                <div class="lyric-top">
                    <img src="images/player-it666-trumpet.png" alt="">
                    <div class="voice-progress-bar">
                        <div class="voice-progress-line">
                            <div class="voice-progress-dot"></div>
                        </div>
                    </div>
                </div>
                <div class="lyric-bottom">
                    <ul class="lyric-list">
                    </ul>
                    <div class="lyric-time-line">
                        <img src="images/player-small-play.png" alt="">
                        <div></div>
                        <span>00:00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容 End -->
    <!-- 底部start -->
    <div class="footer">
        <div class="footer-in">
            <div class="footer-top">
                <span class="cur-time">00:00</span>
                <div class="progress-bar">
                    <div class="progress-line">
                        <div class="progress-dot"></div>
                    </div>
                </div>
                <span class="total-time">04:27</span>
            </div>
            <ul class="footer-bottom">
                <li><img src="images/player-it666-loop.png" alt=""></li>
                <li><img src="images/player-it666-pre.png" alt=""></li>
                <li class="play">
                    <img src="images/player-it666-play.png" alt="">
                    <img src="images/player-it666-pause.png" alt="">
                </li>
                <li><img src="images/player-it666-next.png" alt=""></li>
                <li class="list"><img src="images/player-it666-list.png" alt=""></li>
            </ul>
        </div>
    </div>
    <!-- 底部end -->
    <audio></audio>

    <!-- 模态窗口 -->
    <div class="modal">
        <div class="modal-main">
            <div class="modal-top">
                <p>
                    <img src="images/playlist-it666-loop.png" alt="">
                    <span>列表循环</span>
                </p>
                <div>
                    <p>
                        <img src="images/player-small-favorite.png" alt="">
                        <span>收藏全部</span>
                    </p>
                    <img src="images/player-it666-delete.png" class="clear-all">
                </div>
            </div>
            <ul class="modal-midlle">
                
            </ul>
            <div class="modal-bottom">关闭</div>
        </div>
    </div>

    <script src="./../js/less.js"></script>
    <script src="./../js/zepto.js"></script>
    <script src="./../js/fx.js"></script>
    <script src="./../js/fx_methods.js"></script>
    <script src="./../js/iscroll-probe.js"></script>
    <script src="./../js/swiper.js"></script>
    <script src="./../js/axios.js"></script>
    <script src="./../js/api.js"></script>
    <script src="./../js/template-web.js"></script>
    <script src="./../js/clamp.js"></script>
    <script src="./../js/tools.js"></script>
    <script src="js/progress.js"></script>
    <script src="js/index.js"></script>

</body>

</html>